<script>
import {reactive, shallowReactive, ref} from "vue";

export default {
  name: "App",
  setup(props, context) {
    /*
        shallowReactive
        shallowReactive()是reactive() 的浅层作用形式。
        和 reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。
    */
    // 使用shallowReactive()函数创建一个浅层的响应式对象
    const account = shallowReactive({
      userName: "taopinqi",
      userPassword: "taopinqi103",
      registrationTime: {
        date: 2010,
      }
    })
    const changeAccount = () => {
      // shallowReactive()是浅层的响应式
      account.registrationTime.date += 1
    }
    return {
      account,
      changeAccount
    }
  }
}
</script>
<template>
  <div class="App">
    <h1>注册时间：{{ account.registrationTime.date }}</h1>
    <h1>账号是：{{ account.userName }}</h1>
    <h1>密码是：{{ account.userPassword }}</h1>
    <button @click="changeAccount">修改</button>
  </div>
</template>

<style lang="less">

</style>
